<style lang="less">
	.head_search {
		margin: 0 10rpx 10rpx 25rpx;
		height: 60rpx;
		background: #F2F2F2;
		border-radius: 10rpx;
		flex: 1;
	}

	.line {
		display: inline-block;
		width: 4rpx;
		height: 22rpx;
		border-radius: 5rpx;
		background: #999;
	}

	.icon_da {
		margin: 0 15rpx 0.5rpx 20rpx;
		font-size: 36rpx;
	}

	.icon_search {
		font-size: 28rpx;
		margin: 0 0 0 15rpx;
	}

	.swiper_u {
		height: 100%;
		width: 380rpx;
		font-size: 26rpx;
		color: #999;
		margin: 0 40rpx 0 15rpx;
	}

	.swiper-item {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.head_right {
		height: 50rpx;
		margin: 0 25rpx 0 0;
		width: 250rpx;
		border-radius: 25rpx;
		background: #FFEBCD;

		&>view:first-child {
			box-sizing: content-box;
			width: 50rpx;
			height: 50rpx;
			background: #CC9966;
			border-radius: 50%;
			color: #fff;
			font-size: 25rpx;
			font-weight: bold;
		}

		&>view:last-child {
			display: flex;
			justify-content: flex-start;
			margin: 0 0 0 10rpx;
			font-weight: bold;
			flex: 1;
			color: #FF7F00;
			font-size: 25rpx;
			letter-spacing: 1rpx;
		}

		.icon_start {
			color: #FFCC99;
			transition: all 1s;
		}
	}

	.swiper-content {
		height: 100%;
		display: flex;
		// flex: 1;
		width: 100vw;
		background: #fff;
	}

	.swiper_item {
		box-sizing: border-box;
		overflow: auto;
	}

	.item_box {
		// border-bottom: 1px solid #EDEDED;
		padding: 15rpx 0;

		.item_title_noimg {
			font-size: 28rpx;
			color: #333;
			margin: 0 0 15rpx;
		}

		.tag {
			font-size: 17rpx;
			background: rgba(255, 0, 0, 0.1);
			padding: 3rpx 10rpx;
			color: #f00;
			border-radius: 7rpx;
			margin: 0 20rpx 0 0;
		}

		.from {
			font-size: 18rpx;
			color: #999;
			margin: 0 20rpx 0 0;
		}

		.time {
			font-size: 18rpx;
			color: #999;
		}
	}

	.item_img>image {
		height: 160rpx;
		margin: 0 0 10rpx;

		&:nth-child(2) {
			margin: 0 10rpx 10rpx;
		}
	}

	.no_top {
		border-top: 1px solid #EDEDED;
	}

	video {
		width: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.tab{
		// display: flex;
		// flex-wrap: nowrap;
		// justify-content: flex-start;
		// box-sizing: border-box;
		padding: 0 30rpx;
		box-sizing: border-box;
		// overflow: auto;
		width: 100vw;
		.tab_item{
			margin-right: 30rpx;
			font-size: 30rpx;
			// word-break: break-all;
			// display: inline-block;
			// flex-direction: column;
			// align-items: center;
			// flex-shrink: 0;
		}
		.line{
			height: 8rpx;
			width: 40rpx;
			margin: 10rpx auto 0;
			background: white;
			border-radius: 20px;
		}
		.tab_item_act{
			color: rgb(24, 144, 255);
			.line{
				background: rgb(24, 144, 255);
			}
		}
	}
	/deep/ .uni-scroll-view-content{
		display: flex;
	}
	.recommend_page_scroll_view /deep/ .uni-scroll-view-content{
		flex-direction: column;
	}
	
</style>
<template>
	<view class="content">
		<view id='topRef'>
			<view class="" :style="'height:' + statusBarHeight +'px'" ></view>
			<view class="flex_v_venter">
				<view class="head_search flex_v_venter">
					<i class='iconfont icon_da flex_v_venter icon-date'></i>
					<text class="line"></text>
					<i class='iconfont icon_search icon-search'></i>
					<swiper style="word-wrap: normal;overflow: hidden;text-overflow: ellipsis;" class="swiper_u flex_v_venter"
					 :indicator-dots="false" :vertical='true' :autoplay="true" :loop='true' :interval="3000" :duration="500">
						<swiper-item style="width: 100%;" class="flex_v_venter" v-for="item in 2" :key='item'>
							<view class="swiper-item flex_v_venter">看上水美丽如画</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="head_right flex_v_venter"  v-if='userInfo'>
					<view class="flex_center">
						100
					</view>
					<view class="flex_center">
						{{userInfo.isTodaySign ? '已领取' :'领取' }}
					</view>
				</view>
			</view>
			<!-- <v-tabs class='tabs' v-model="current" :tabs="tabs" @change="changeTab"></v-tabs> -->
			<!-- <view class="" style="width: 100%;"> -->
			<scroll-view scroll-with-animation :scroll-x="true" 
			:scroll-into-view="currentTabId" class="tab ">
				<view :class="current == index ? 'tab_item tab_item_act flex_coum_center':'tab_item flex_coum_center'" :id="'current' + index"  v-for="(item, index) in tabs" :key="index" @click="changeTab(index,true)">
					<view class="flex_center" style="white-space:nowrap;">{{item}}</view>
					<view class="line"></view>
				</view>
			</scroll-view>
		</view>
			<!-- </view> -->
		<load-refresh  ref="loadRefresh" :style="'height:' + getMidHeight" :heightReduce="10"
			 :backgroundCover="'#F3F5F5'"
			 :isRefresh="isRefresh"
			 :loadingend="loadingend"
			 @loadingendChange="loadingendChange"
			 @refresh="refresh"
			 @loadmore="loadmore">
			<view slot="content-list">
				<swiper @change="changePage" class="swiper-content" :current='current' :autoplay="false" :indicator-dots="false" :duration="100">
					<swiper-item class="swiper_item" v-for="(item2, i) in tabs" :key='item2'>
						<recommend-compont
							:list="list[i]" 
							:adList="adList[i]"
							:type='type'
							:status="statusList[i]"
							@loadmore="loadmore"
						/>
					</swiper-item>
				</swiper>
			</view>
		</load-refresh>
		<task-complate2 />
	</view>
</template>

<script>
	//页面中引入组件实例
	import vTabs from './index-componts/v-tabs/v-tabs.vue'
	import loadRefresh from './index-componts/load-refresh/load-refresh.vue'
	import recommendCompont from './index-componts/pages/recommend-compont.vue' //推荐
	import followCompont from './index-componts/pages/follow-compont.vue' //关注
	export default {
		data() {
			return {
				current: 2,
				currentTabId:'current0',
				isRefresh: true,
				loadingend: false,
				fontSize: '25',
				scrollTop: 1,
				msg: '玩直播',
				currPage: 1,
				totalPage: 1,
				imgList: ['../../static/img/cat.jpg', '../../static/img/cat.jpg', '../../static/img/cat.jpg'],
				tabs: [
					'推荐',
					'头条',
					'娱乐',
					'奇趣',
					'健康',
					'美食',
					'三农',
					'家居',
					'体育',
					'教育',
					'国外',
					'财经',
					'时尚',
					'故事',
					'旅行',
					'星座',
					'游戏',
					'汽车',
					'科技',
					'文化'
				],
				page:2,
				type:0,
				params: [],
				list: [],
				adList: [],
				statusList: [],
				startTime: 0,
				startX: 0,
				startY: 0,
				topHeight:0,
				windowHeight:0,
				statusBarHeight:0,
				QSTabsWxsListHeight: 0,  //组件高度
				testres: ''
			}
		},
		components: {
			vTabs,
			loadRefresh,
			recommendCompont,
		},
		async onLoad(options) {
			if (options.hasTaskComplate) {
				this.$nextTick(function(){
					this.$store.commit('setComplateTask', this.$store.state.complateTask)
				})
			}
			this.testres = options.res || ''
			uni.getSystemInfo({
				success(res) {
					console.log('system:',res)
				}
			})
			this.tabs.map((item,idx) => {
				let tempParams = {
					page: 1,
					size: 10,
					type: idx
				}
				this.params.push(tempParams)
				this.list.push([])
				this.statusList.push(0)
			})
			this.getReturn()
			if(!uni.getStorageSync('token')){
				await this.getToken()
			}
			await this.getAdList()
			this.getList()
		},
		mounted() {
			let _this = this
			const query = uni.createSelectorQuery().in(this);
			query.select('#topRef').boundingClientRect(data => {
				_this.topHeight = data.height
			}).exec();
			uni.getSystemInfo({
				success(r) {
					console.log(r)
					_this.statusBarHeight = r.statusBarHeight
					_this.windowHeight = r.windowHeight
				}
			})
		},
		computed:{
			getMidHeight() {
				return this.windowHeight - this.topHeight -this.statusBarHeight + 'px'
			},
			getBottom(){
				return (status) => {
					return status == 2 ? '没有更多数据了' : ( status == 1 ? '加载中' : '上拉加载更多')
				}
			},
			utilList(){
				return (arr,index) => {
					// console.log(JSON.parse(arr),index)
					return JSON.parse(arr)
				}
			},
			userInfo () {
				return this.$store.state.userInfo
			}
			// uniList() {
			// 	let newsAndAdList = [...this.list]
			// 	console.log(newsAndAdList);
			// 	this.adList.map((item,idx) => {
			// 		newsAndAdList[this.current].splice((idx+1)*5, 1, item)
			// 	})
			// 	return newsAndAdList
			// }
			
		},
		methods: {
			loadingendChange (bool) {
				this.loadingend = bool
			},
			changePage(e){
				this.current = e.detail.current
				// this.currentTabId = 'current' + (e.detail.current - 4 > 0 ? e.detail.current - 4 : '000') 
				this.changeTab(this.current,false)
			},
			loadmore () {
				this.getList()
			},
			getAdList () {
				this.$ajax('ad/list', {
					type: this.params[this.current].type
				}, 'get').then(res => {
					this.$set(this.adList, this.current, res.data.obj)
				})
			},
			//获取列表
			getList() {
				this.statusList[this.current] = 1
				
				this.$ajax('news/list', {
					page: this.params[this.current].page,
					size: this.params[this.current].size,
					type: this.params[this.current].type
				}, 'get').then(res => {
					// this.isRefresh = false
					this.loadingend = true
					if (this.params[this.current].page === 1) {
						// this.list[this.current] = [...res.data.obj]
						if (res.data.obj.length) {
							this.$set(this.list, this.current, res.data.obj)
							this.params[this.current].page++
						} else {
							this.$set(this.statusList, this.current, 3)
						}
						
					} else {
						if (res.data.obj.length) {
							let tempList =[...this.list[this.current].concat(res.data.obj)]
							this.$set(this.list, this.current, tempList)
							this.params[this.current].page++
						} else {
							this.$set(this.statusList, this.current, 2)
						}
					}
				}).catch(err => {
					console.log(err);
				})
			},
			//获取token
			getToken() {
				this.$ajax('user/init', '', 'get').then(res => {
					uni.setStorageSync('token', res.data.obj.token)
					this.getAdList()
					this.getList()
				})
			},
			getReturn() {
				this.msg = '玩直播'
				this.fontSize = 22
				setTimeout(() => {
					this.fontSize = 28
					setTimeout(() => {
						this.getReturn()
					}, 1000)
				}, 1000)
			},
			changeContent(e) {
				this.current = e.detail.current
			},
			refresh() {
				console.log('refresh');
				this.params[this.current].page = 1
				this.$set(this.list, this.current, [])
				setTimeout(() => {
					this.getList()
				},1000)
				// this.scrollTop = 1
			},
			async changeTab(index,flag) {
				this.currentTabId = 'current' + (index - 4 > 0 ? index - 4 : '000')
				this.$set(this, 'current', index)
				if (!this.list[this.current].length) {
					if(!flag){
						await this.getAdList()
						this.getList()
					}
				}
			},
		}
	}
</script>
